<template>
  <figure class="img-box">
    <ul class="img-ul" :style="ulStyle">
      <li v-for="item in modelValue" :key="item.t_content_pk">
        <div
          class="img-div"
          :style="{ backgroundImage: 'url(' + item.image_path + ')' }"
        ></div>
      </li>
    </ul>
  </figure>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Array,
    },
  },
  data() {
    return {
      width: 0,
      translate: 0,
    };
  },
  created() {
    let value = -2;
    this.width = 0;
    setInterval(() => {
      this.width = 300 * this.modelValue.length;
      const left = 1200 - this.width;
      // 如果长度小于4，那么什么都不做
      if (this.modelValue.length < 4) {
        return;
      }
      if (this.translate >= 0) {
        value = -2;
      } else if (this.translate <= left) {
        value = 2;
      }
      this.translate += value;
    }, 20);
  },
  computed: {
    ulStyle() {
      const width = this.width + "px";
      const transform = "translate(" + this.translate + "px)";
      return {
        transform,
        display: "flex",
        width,
        height: "180px",
      };
    },
  },
};
</script>

<style scoped>
.img-box {
  overflow: hidden;
}

.img-ul > li {
  padding: 0px 10px;
  width: 300px;
}

.img-div {
  height: 180px;
  background-size: contain;
  background-repeat: no-repeat;
}

</style>